<template>
	<view>
		<view class="recharge_way card_box">
			<view class="recharge_way_list">
				<view class="recharge_way_item">
					<view class="menu_item" v-for="(menu, i) in menus" :key="i" @click="jumpSwitch(menu.path)">
						<label class="radio">
							<view class="avatoa">
								<image :src="menu.menuImg" class="imgava"></image>
								<text class="menu_title">{{menu.menuName}}</text>
							</view>
							<view class="">
								<text class="menu_title arrow_icon">〉</text>
							</view>
						</label>
					</view>
				</view>
			</view>
		</view>
		<view class="recharge_box card_box">
			<view class="recharge_hint">
				最近转账
			</view>
			<view class="recharge_way_list">
				<view class="recharge_way_item">
					<view class="menu_item" v-for="(item, i) in friendList" :key="i">
						<view class="avatoa">
							<image :src="item.friendHeader" class="imgava"></image>
							<view class="">
								<view class="">
									<text class="menu_title">{{item.friendName}}</text>
								</view>
								<view class="">
									<text class="bank_card_no">{{account(item.Account)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: '',
				menus: [{
					menuName: '转到云智汇账户',
					menuImg: '../../../static/images/vip.png',
					path: './transferDetails',
				}, {
					menuName: '转账记录',
					menuImg: '../../../static/images/list.png',
					path: '../myBills',
				}],
				friendList: [{
					friendName: '张三',
					friendHeader: '../../../static/images/vip.png',
					Account: '14797758258',
				}, {
					friendName: '李四',
					friendHeader: '../../../static/images/vip.png',
					Account: '13838389438',
				}, {
					friendName: '王五',
					friendHeader: '../../../static/images/ren.png',
					Account: '13147799520',
				}]
			};
		},
		onShow:function(){
			
		},
		methods: {
			jumpSwitch(path) {
				if (path === undefined) {
					uni.showModal({
						title: '提示',
						content: '敬请期待~',
						confirmColor: "#007AFF",
						showCancel: false
					});
				} else {
					console.log(path)
					uni.navigateTo({
						url: path
					})
				}
			},
		},
		computed: {
			account(account) {
				return function(account) {
					return account.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss">
	.card_box {
		box-shadow: 0px 2px 8px 0px #ededed;
		margin-bottom: 20rpx;
		background-color: #FFF;
	}

	.recharge_hint {
		font-size: 34rpx;
		padding: 36rpx 36rpx 0;
	}

	.recharge_input {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 60rpx;
		padding: 36rpx;

		.input {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			padding: 24rpx;
			font-size: 80rpx;
		}
	}

	.recharge_way_list {
		margin-top: 24rpx;
	}

	.menu_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background-color: #FFFFFF;

		.radio {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		&:active {
			background-color: #f6f6f6;
		}
	}


	.avatoa {
		display: flex;
		align-items: center;
	}

	.imgava {
		width: 56rpx;
		height: 56rpx;
		margin-right: 25rpx;
	}

	.menu_title {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
	}

	.bank_card_no {
		font-size: 28rpx;
		color: #999;
	}

	.arrow_icon {
		color: #333;
	}
</style>
